body{
    background: gray;
}
#web{
    margin: 0 auto;
    min-width: 320px;
    max-width: 480px;   
}
.page1{
    overflow: hidden;
    .fc{
        position: absolute;
        transform: scale(0);
    }
    .bg1{
        z-index: 1;
        width: 100%;
        font-size: 0;
        position: absolute;
        bottom: 0;
        transform: translateY(100%);
        img{
            max-height:480px;
            width: 100%;
        }
    }
    .home{
        z-index: 3;
        left: 50%;
        transform: translate(-50%,100%);
        font-size: 0;
        position: absolute;
        bottom: 0;
    }
    .boat{
        z-index: 5;
        font-size: 0;
        position: absolute;
        bottom: -5%;
        transform: translateX(-100%);
        opacity: 0;
        width: 100%;
    }
    .plane{
        opacity: 0;
        z-index: 2;
        font-size: 0;
        position: absolute;
        top: 10%;
        transform: translateX(-100%);
    }
    .chinese{
        z-index: 7 ;
        font-size: 0;
        position: absolute;
        right: 5%;
        top: 36%;
        transform:scale(0);
    }
    .man{
        font-size: 0;
        z-index: 4;
        bottom: 0;
        position: absolute;
        transform: translateX(-100%);
    }
    .woman{
        font-size: 0;
        z-index: 4;
        bottom: 0;
        position: absolute;
        transform: translateX(-100%);
    }
    .text1{
        z-index: 6;
        position: absolute;
        top: -20%;
        left: -10%;
    }
    .text2{
            
        z-index: 6;
        position: absolute;
        top: -20%;
    }
}
.page1.active{
    .fc{
        animation:fc1 2s linear 1 forwards, fc2 8s linear 1500ms infinite;
    }
    .bg1{
        animation:bg1 0.5s linear 1500ms 1 forwards;
    }
    .home{
        animation:home 0.3s linear 1200ms 1 forwards;
    }
    .boat{
        animation: boat 2s ease 1500ms 1 forwards;
    }
    .plane{
        animation: plane 1s ease 3000ms 1 forwards;
    }
    .chinese{
        animation: chinese1 1s linear 5500ms 1 forwards,chinese1-1 2s linear 6500ms 1 forwards
     }
    .man{
        animation: man 1.5s ease 3800ms 1 forwards;
    }
    .woman{
        animation: woman 1.5s ease 4300ms 1 forwards;
    }
    .text1{
        animation: text1 0.5s ease 4800ms 1 forwards;
    }
    .text2{
        animation: text2 0.3s ease 5200ms 1 forwards;
    }
}


.section{
    position: relative;
    overflow: hidden;
    .bg{
        .fc{
            position: absolute;
            transform: scale(3);
        }
        .bg1{
            z-index: 1;
            width: 100%;
            font-size: 0;
            position: absolute;
            bottom: 0;
//          transform: translateY(100%);
            img{
                max-height:480px;
                width: 100%;
            }
        }
        .home{
        z-index: 3;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0;
        position: absolute;
        bottom: 0;
    }
    .boat{
        z-index: 5;
        font-size: 0;
        position: absolute;
        bottom: -5%;
        transform: translateX(35%);
        opacity: 1;
        width: 100%;
    }
    .plane{
        opacity: 1;
        z-index: 2;
        font-size: 0;
        position: absolute;
        top: 10%;
        transform: translateX(18%);
    }
    .chinese{
        z-index: 7 ;
        font-size: 0;
        position: absolute;
        right: 5%;
        top: 36%;
    }
    .man{
        font-size: 0;
        z-index: 4;
        bottom: 0;
        position: absolute;
        transform: translateX(40%);
    }
    .woman{
        font-size: 0;
        z-index: 4;
        bottom: 0;
        position: absolute;
        transform: translateX(0%);
    }
    .text1{
        z-index: 6;
        position: absolute;
        top: 43.5%;
        left: -10%;
    }
    .text2{
            
        z-index: 6;
        position: absolute;
        top: 35%;
    }
    }
}



@keyframes fc1{
    100%{
        transform: scale(4);
    }
}
@keyframes fc2{
    0%{
        transform: rotate(0deg) scale(4);
    }
    100%{
        transform: rotate(360deg) scale(4);
    }
}
@keyframes bg1{
    80%{
        transform: translateY(-5%);
    }
    100%{
        transform: translateY(0);
    }
}
@keyframes home{
    80%{
        transform: translate(-50%,-5%);
    }
    100%{
        transform: translate(-50%,0%);
    }
}
@keyframes boat{
    30%{
        opacity: 0.2;
    }
    60%{
        opacity: 0.4;
    }
    100%{
        opacity: 1;
        transform: translateX(35%);
    }
}
@keyframes plane{
    30%{
        opacity: 0.2;
    }
    60%{
        opacity: 0.4;
    }
    100%{
        opacity: 1;
        transform:translateX(18%);
    }
}
@keyframes chinese1{
    40%{
        transform: scale(1.2);  
    }
    60%{
        transform: scale(1);
    }
    80%{    
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes chinese1-1{
    0%{
        transform: rotate(0) scale(1);
    }
    25%{
        transform: rotate(10deg) scale(1);
    }
    50%{
        transform: rotate(-10deg) scale(1);
    }
    75%{
        transform: rotate(10deg) scale(1);
    }
    100%{
        transform: rotate(0deg) scale(1);
    }
    
}
@keyframes man{
    30%{
        transform: translateX(60%);
    }
    50%{
        transform: translateX(30%);
    }
    70%{
        transform: translateX(50%);
    }
    100%{
        transform: translateX(40%);
    }
}
@keyframes woman{
    30%{
        transform: translateX(10%);
    }
    50%{
        transform: translateX(-10%);
    }
    70%{
        transform: translateX(5%);
    }
    100%{
        transform: translateX(0%);
    }
}
@keyframes text1{
    70%{
        top: 46%;
    }
    100%{
        top: 43.5%;
    }
}
@keyframes text2{
    70%{
        top: 40%;
    }
    100%{
        top: 35%;
    }
}

.page2{
    .p2-bg{
        opacity: 0;
        top: 0;
        width: 100%;
        position: absolute;
        background: #D4A4DD;
        height: 100%;
        z-index: 10;
    }
    .top-t{
        margin-top: 20px;
        font-weight: bold;
        color: white;
        font-size: 16px;
        position: absolute;
        top: 0;
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
    }
    .top-up{
        margin-top: 22px;
        color: hotpink;
        z-index: 11;
    }
    .top-on{
        opacity: 0;
        z-index: 12;
    }
    .box1{
        transform: scale(0);
        left: 9%;
        top: 15%;
        border-radius: 50%;
        font-size: 0;
        z-index: 13;
        position: absolute;
        background: rgb(255, 242, 109);
    }
    .box1-t1{
        transform: translateX(100%);
        right: 0;
        top: 19%;
        position: absolute;
        z-index: 12;
        width: 74%;
        height: 36px;
        line-height: 36px;
        background: white;
        text-align: center;
        font-size: 16px;
        
    }
    .box1-t2{
        font-size: 18px;
        transform: translateX(100%);
        right: 0;
        top: 25.5%;
        position: absolute;
        z-index: 12;
        color: white;
    }
    .box2{
        transform: scale(0);
        overflow: hidden;
        right:9%;
        top: 35%;
        border-radius: 50%;
        font-size: 0;
        z-index: 13;
        position: absolute;
        background:white;
    }
    .box2-t1{
        transform: translateX(-100%);
        top: 39%;
        left: 0;
        position: absolute;
        z-index: 12;
        width: 74%;
        height: 36px;
        line-height: 36px;
        background: white;
        text-align: center;
        font-size: 16px;
        
    }
    .box2-t2{
        transform: translateX(100%);
        font-size: 18px;
        right:0;
        top: 45.5%;
        position: absolute;
        z-index: 12;
        color: white;
    }
    .box3{
        transform: scale(0);
        left: 9%;
        top: 55%;
        border-radius: 50%;
        font-size: 0;
        z-index: 13;
        position: absolute;
        background:rgb(156, 220, 255);
    }
    .box3-t1{
        transform: translateX(100%);
        top: 59%;
        right: 0;
        position: absolute;
        z-index: 12;
        width: 74%;
        height: 36px;
        line-height: 36px;
        background: white;
        text-align: center;
        font-size: 16px;
        
    }
    .box3-t2{
        transform: translateX(100%);
        right: 0;
        font-size: 18px;
        top: 65.5%;
        position: absolute;
        z-index: 12;
        color: white;
    }
    .box4{
        
        transform: scale(0);
        overflow: hidden;
        right:9%;
        top: 75%;
        border-radius: 50%;
        font-size: 0;
        z-index: 13;
        position: absolute;
        background:rgb(151, 236, 185);
    }
    .box4-t1{
        transform: translateX(-100%);
        top: 79%;
        left: 0;
        position: absolute;
        z-index: 12;
        width: 74%;
        height: 36px;
        line-height: 36px;
        background: white;
        text-align: center;
        font-size: 16px;
        
    }
    .box4-t2{
        transform:translateX(100%) ;
        font-size: 18px;
        right: 0;
        top: 85.5%;
        position: absolute;
        z-index: 12;
        color: white;
    }
    
}


.page2.active{
    .fc{
        animation:fc2 8s linear infinite;
    }
    .p2-bg{
        animation: p2-bg 1s linear 1 50ms forwards;
    }
    .box1{
        animation: box1 0.5s ease 500ms forwards;
    }
    .box2{
        animation: box2 0.5s linear 700ms forwards;
    }
    .box3{
        animation: box3 0.5s linear 900ms forwards;
    }
    .box4{
        animation: box4 0.5s linear 1100ms forwards;
    }
    .box1-t1{
        animation: box1-t1 0.5s linear 500ms forwards;
    }
    .box1-t2{
        animation: box1-t2 0.5s linear 500ms forwards;
    }
    .box3-t1{
        animation: box3-t1 0.5s linear 900ms forwards;
    }
    .box3-t2{
        animation: box3-t2 0.5s linear 900ms forwards;
    }
    .box2-t1{
        animation: box2-t1 0.5s linear 700ms forwards;
    }
    .box2-t2{
        animation: box2-t2 0.5s linear 700ms forwards;
    }
    .box4-t1{
        animation: box4-t1 0.5s linear 1100ms forwards;
    }
    .box4-t2{
        animation: box4-t2 0.5s linear 1100ms forwards;
    }
    .top-on{
        animation: top-on 2s ease 300ms forwards;
    }
}

@keyframes top-on{
    0%{
        transform:translateX(-50%);
    }
    20%{
        opacity: 1;
        transform:translateX(-50%) scale(1.2);
    }
    60%{
        opacity: 1;
        transform:translateX(-50%) scale(0.8);
    }
    80%{
        opacity: 1;
        transform:translateX(-50%) scale(1.1);
    }
    100%{
        opacity: 1;
        transform:translateX(-50%) scale(1);
    }
}

@keyframes p2-bg{
    100%{
        opacity: 0.6;
    }
}
@keyframes box1{
    70%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes box2{
    80%{
        transform: scale(1.15);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes box3{
    70%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes box4{
    70%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes box1-t1{
    100%{
        transform: translateX(0);
    }
}
@keyframes box1-t2{
    100%{
      transform:translateX(-50%);  
    }
}
@keyframes box3-t1{
    100%{
        transform: translateX(0);
    }
}
@keyframes box3-t2{
    100%{
      transform:translateX(-15%);  
    }
}
@keyframes box2-t1{
    100%{
        transform: translateX(0%);
    }
}
@keyframes box2-t2{
    100%{
      transform:translateX(-110%);  
    }
}
@keyframes box4-t1{
    100%{
        transform: translateX(0%);
    }
}
@keyframes box4-t2{
    100%{
      transform:translateX(-130%);  
    }
}



.page3{
    overflow: hidden;
    .p3-bg{
        opacity: 0;
        top: 0;
        width: 100%;
        position: absolute;
        background:skyblue;
        height: 100%;
        z-index: 10;
    }
    .top-t{
        margin-top: 20px;
        font-weight: bold;
        color: white;
        font-size: 16px;
        position: absolute;
        top: 0;
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
    }
    .top_under{
        margin-top: 22px;
        z-index: 11;
        color: darkblue;
    }
    .top_on{
        opacity: 0;
        z-index: 12;
    }
    .w{
        transform: scale(0);
        right:5%;
        top: 15%;
        font-size: 0;
        z-index: 13;
        position: absolute;
        img{
            border-radius: 50%;
        }
    }
    .m{
        transform: scale(0);
        position: absolute;
        top: 55%;
        left: 5%;
        z-index: 13;
        font-size: 0;
        img{
            border-radius: 50%;
        }
    }
    .w-t{
        transform: translateX(100%);
        right: 0;
        top: 19%;
        position: absolute;
        z-index: 12;
        width: 70%;
        height: 36px;
        line-height: 36px;
        background: white;
        text-align: left;
        text-indent: 35px;
        font-size: 16px;
    }
    .m-t{
        transform: translateX(-100%);
        top: 60%;
        left: 0;
        position: absolute;
        z-index: 12;
        width: 59%;
        height: 36px;
        line-height: 36px;
        background: white;
        text-align: right;
        padding-right:35px;
        font-size: 16px;
    }
    .w-ul{
        transform: translateY(-240%);
        top: 23%;
        position: absolute;
        z-index: 14;
        li{
            line-height: 24px;
            font-size: 13px;
            color: white;
            list-style: none;
            text-align: right;
        }
        .name{
            font-weight: bold;
            font-size: 16px;
        }
    }
    .m-ul{
        transform: translateX(100%);
        right:10%;
        top: 65%;
        position: absolute;
        z-index: 14;
        li{
            line-height: 24px;
            font-size: 13px;
            color: white;
            list-style: none;
            text-align: left;
        }
        .name{
            font-weight: bold;
            font-size: 16px;
        }
    }
}


.page3.active{
    .fc{
        animation:fc2 8s linear infinite;
    }
    .p3-bg{
        animation: p3-bg 1s linear 150ms forwards;
    }
    .w-t{
        animation: w-t 1s linear 300ms forwards;
    }
    .m-t{
        animation: m-t 1s linear 800ms forwards;
    }
    .w{
        animation: w 1s linear 300ms forwards;
    }
    .m{
        animation: m 1s linear 800ms forwards;
    }
    .w-ul{
        animation: w-ul 1s ease 400ms forwards ;
    }
    .m-ul{
        animation: m-ul 2s ease 400ms forwards ;
    }
    .top_on{
        animation: top_on 2s ease 300ms forwards;
    }
    
    
}
@keyframes top_on{
    0%{
        transform:translateX(-50%);
    }
    20%{
        opacity: 1;
        transform:translateX(-50%) scale(1.2);
    }
    60%{
        opacity: 1;
        transform:translateX(-50%) scale(0.8);
    }
    80%{
        opacity: 1;
        transform:translateX(-50%) scale(1.1);
    }
    100%{
        opacity: 1;
        transform:translateX(-50%) scale(1);
    }
}

@keyframes p3-bg{
    100%{
        opacity: 0.7;
    }
}
@keyframes w-t{
    100%{
        transform:translateX(0);
    }
}
@keyframes m-t{
    100%{
        transform:translateX(0);
    }
}
@keyframes w{
    100%{
        transform: scale(1);
    }
}
@keyframes m{
    100%{
        transform: scale(1);
    }
}
@keyframes w-ul{
    100%{
        transform: translateY(0);
    }
}
@keyframes m-ul{
    100%{
        transform: translateX(0);
    }
}



.page4{
    overflow: hidden;
    .p4-bg{
        opacity: 0;
        top: 0;
        width: 100%;
        position: absolute;
        background:#B3EECA;
        height: 100%;
        z-index: 10;
    }
    .boy{
        position: absolute;
        z-index: 11;
        bottom: 0;
        transform: rotateZ(-180deg);
        transform-origin: left;
    }
    .box1{
        transform: translateX(100%);
        top: 19%;
        right: 0;
        width: 60%;
        position: absolute;
        z-index: 11;
        background: white;
        height: 5%;
    }
    .box-text{
        color: #FF9907;
        font-size: 22px;
        right: 2%;
        position: absolute;
        z-index: 12;
        top: 0;
        transform: translateY(-100%);
        letter-spacing: 7px;
    }
    .box-p{
        color: #FF9907;
        opacity: 0.8;
        transform: translateX(120%);
        padding: 20px;
        font-size: 15px;
        top: 29%;
        width: 38%;
        position: absolute;
        z-index: 11;
        background: white;
        height: 28%;
        right: 4%;
        border-radius: 12%;
        line-height: 23px;
    }
}

.page4.active{
    .fc{
        animation:fc2 8s linear infinite;
    }
    .p4-bg{
        animation: p4-bg 1s linear 1 50ms forwards;
    }
    .boy{
        animation: boy 0.8s linear 1 100ms forwards;
    }
    .box1{
        animation: box1 0.4s linear 1 800ms forwards;
    }
    .box-p{
        animation: box-p 0.4s linear 1 800ms forwards;
    }
    .box-text{
        animation: box-text 0.5s linear 1 1000ms forwards ;
    }
    
}
@keyframes p4-bg{
    100%{
        opacity: 0.6;
    }
}
@keyframes boy{
    100%{
        transform: rotate(0);
    }
}
@keyframes box1{
    100%{
        transform: translateX(0);
    }
}
@keyframes box-p{
    100%{
        transform: translateX(0);
    }
}
@keyframes box-text{
    100%{
        top: 16%;
        transform: translateY(0);
    }
}
.page5{
    overflow: hidden;
    .p5-bg{
        opacity: 0;
        top: 0;
        width: 100%;
        position: absolute;
        background:#FAEAB9;
        height: 100%;
        z-index: 10;
    }
    .girl{
        opacity: 0;
        transform: translateX(-100%);
        position: absolute;
        z-index: 11;
        bottom: 0;
    }
    .box2{
        transform: translateX(100%);
        top: 19%;
        right: 0;
        width: 60%;
        position: absolute;
        z-index: 11;
        background: white;
        height: 5%;
    }
    .box-text2{
        color: #3C3C64;
        font-size: 22px;
        right: 2%;
        position: absolute;
        z-index: 12;
        top: 0;
        transform: translateY(-100%);
        letter-spacing: 7px;
    }
    .box-p2{
        color: #3C3C64;
        opacity: 0.8;
        transform: translateX(120%);
        padding: 20px;
        font-size: 15px;
        top: 29%;
        width: 38%;
        position: absolute;
        z-index: 11;
        background: white;
        height: 41%;
        right: 4%;
        border-radius: 12%;
        line-height: 23px;
    }
}

.page5.active{
    .fc{
        animation:fc2 8s linear infinite;
    }
    .p5-bg{
        animation: p5-bg 1s linear 1 50ms forwards;
    }
    .girl{
        animation: girl 1s linear 1 150ms forwards;
    }
    .box2{
        animation: box2 0.4s linear 1 800ms forwards;
    }
    .box-p2{
        animation: box-p2 0.4s linear 1 800ms forwards;
    }
    .box-text2{
        animation: box-text2 0.5s linear 1 1000ms forwards ;
    }
}

@keyframes p5-bg{
        100%{
            opacity: 0.6;
        }   
}
@keyframes girl{
    100%{
        opacity: 1;
        transform: translateX(-15%);
    }
}
@keyframes box2{
    100%{
        transform: translateX(0);
    }
}
@keyframes box-p2{
    100%{
        transform: translateX(0);
    }
}
@keyframes box-text2{
    100%{
        top: 16%;
        transform: translateY(0);
    }
}


.page6{
    .box3{
        color:#15496F;
        transform: translateX(-180%);
        line-height: 18px;
        font-size: 12px;
        box-shadow: -4px 4px 5px grey;
        border-radius: 7%;
        position: absolute;
        top: 5%;
        right: 5%;
        z-index: 11;
        width: 45%;
        height: 74%;
        background: white;
        opacity: 0.8;
        padding: 20px;
    }
    .text10{
        transform: translateX(140%);
        font-size: 40px;
        position: absolute;
        z-index: 11;
        right: 13%;
        top: 63%;
    }
    .text11{
        transform: translateX(140%);
        font-size: 40px;
        position: absolute;
        z-index: 11;
        right: 13%;
        top: 71%;
    }
    .text10-1{
        transform: translateX(140%);
        color: greenyellow;
        font-size: 40px;
        position: absolute;
        z-index: 11;
        right: 13%;
        top: 63%;
    }
    .text11-1{
        transform: translateX(140%);
        color: greenyellow;
        font-size: 40px;
        position: absolute;
        z-index: 11;
        right: 13%;
        top: 71%;
    }
    .text10-2{
        transform: translateX(140%);
        color: deeppink;
        font-size: 40px;
        position: absolute;
        z-index: 11;
        right: 12.7%;
        top: 62.8%;
    }
    .text11-2{
        transform: translateX(140%);
        color: deeppink;
        font-size: 40px;
        position: absolute;
        z-index: 11;
        right: 12.7%;
        top: 70.8%;
    }
}


.page6.active{
    .fc{
        animation:fc2 8s linear infinite;
    }
    .box3{
        animation: box3 1s ease 1 200ms forwards;
    }
    .text10,.text11{
        animation: t1 1s ease 1 200ms forwards;
    }
    .text10-1,.text11-1{
        animation: t2 1s ease 1 400ms forwards;
    }
    .text10-2,.text11-2{
        animation: t3 1s ease 1 500ms forwards;
    }
}
@keyframes box3{
       100%{
           transform: translateX(0);
       }   
}
@keyframes t1{
    100%{
        transform: translateX(0);
    }
}
@keyframes t2{
    100%{
        transform: translateX(0);
    }
}

@keyframes t3{
    100%{
        transform: translateX(0);
    }
}

.page7{
    .kuang{
        box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 3px;
        text-align: center;
        line-height: 29px;
        top: 30px;
        border-radius: 20px;
        font-size: 12px;
        color: white;
        background: #FF79A2;
        border: 3px solid white;
        position: absolute;
        z-index: 11;
        left: 50%;
        transform: translateX(-50%);
        width: 194px;
        height: 29px;
    }
    
    .inp{
        text-indent: 10px;
        opacity: 0;
        transform: scale(0);
        box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 3px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 11;
        width: 194px;
        height: 29px;
        border-radius: 20px;
        border: 3px solid #FF79A2;
    }
    .inp1{
        
        top: 70px;
    }
    .inp2{
        top: 108px;
    }
    .inp3{
        top: 146px;
    }
    .inp4{
        top: 184px;
    }
    .inp5{
        top: 222px;
    }
    .inp6{
        padding: 0;
        width: 200px;
        height: 37px;
        top: 260px;
    }
}
.page7.active{
    .fc{
        animation:fc2 8s linear infinite;
    }
    .inp1{
        animation: inp 2s linear 1 200ms forwards; 
    }
    .inp2{
        animation: inp 2s linear 1 300ms forwards; 
    }
    .inp3{
        animation: inp 2s linear 1 200ms forwards; 
    }
    .inp4{
        animation: inp 2s linear 1 500ms forwards; 
    }
    .inp5{
        animation: inp 2s linear 1 600ms forwards; 
    }
    .inp6{
        animation: inp 2s linear 1 600ms forwards; 
    }
    .kuang1{
        animation: kuang 3s linear 300ms infinite;
    }
}
@keyframes inp{
    0%{
        transform: translateX(-50%);
    }
    20%{
        opacity: 1;
        transform:translateX(-50%) scale(1.2);
    }
    40%{
        opacity: 1;
        transform:translateX(-50%) scale(0.8);
    }
    60%{
        opacity: 1;
        transform:translateX(-50%) scale(1.1);
    }
    80%{
        opacity: 1;
        transform:translateX(-50%) scale(0.9);
    }
    100%{
        opacity: 1;
        transform:translateX(-50%) scale(1);
    }
}
@keyframes kuang{
    0%{
        
    }
    20%{
        transform: translateX(-20%) rotate(5deg);
    }
    60%{
        transform: translateX(-80%) rotate(-5deg);
    }
    80%{
        transform: translateX(-50%) rotate(0);
    }
    100%{
        transform: translateX(-50%) rotate(0);
    }
}
